<template>
  <div class="my-order">
    <!-- finished="orderList.length >= total" 当长度大于等于总的长度时，停止加载 -->
    <van-list v-model="loading"
              class="order-list"
              v-if="orderList.length"
              :finished="orderList.length >= total"
              finished-text="没有更多了"
              @load="getOrderList">
      <div v-for="(item, ind) in orderList" :key="ind" class="list-item">
        <div class="name flex jcb">
          <span>{{item.product_name}}{{item.price_type_name}}</span>
          <span :class="{out: item.status === 3}">{{['', '未结算', '支付完成', '已退款'][item.status]}}</span>
        </div>
        <div class="number flex jcb">
          <span>订单号：{{item.out_trade_no}}</span>
          <span>￥{{(item.real_pay / 100).toFixed(2)}}</span>
        </div>
        <div class="time flex jcb">
          <span>支付时间：{{util.formatTime(item.update_time || item.create_time)}}</span>
          <span>￥{{(item.price / 100).toFixed(2)}}</span>
        </div>
      </div>
    </van-list>
    <div class="no-order tac vh100" v-else>
      <img src="../../images/order/no-data.png" alt="" class="no-order-img">
      <div class="content">您还没有相关的交易记录哦~<span style="color: #17cff8;" @click="$router.push('/payvip/' + productInfo.pid)">去看看</span></div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';

  export default {
    computed: {
      ...mapGetters(['userInfo', 'productInfo'])
    },
    data() {
      return {
        orderList: [],
        curr: 0,
        limits: 15,
        total: 0,
        loading: true,
      }
    },
    created() {
      this.getOrderList();
    },
    methods: {
      getOrderList() {
        this.curr++;
        this.http.$post('api/weixin_pay/get_order_list', {
          curr: this.curr,
          limits: this.limits,
          uid: this.userInfo.uid,
          product_id: this.productInfo.product_id,
          status: ''
        }).then(res => {
          //如果直接赋值，就会不断用新的替换之前的数据，当长度不能大于等于总的长度，所以不能停止加载，加载到最后就会变成0，直接跳到没有订单页，所以需要用push的方法
          // this.orderList = res.list
          this.orderList.push(...res.list);
          this.total = res.total;
          this.loading = false;
        }).catch(this.$err);
      },
    },
  }
</script>
<style lang="less" scoped>
  .my-order {
    background-color: #f3f3f3;
    min-height: 100%;
    .list-item {
      padding: 1.22rem 1rem;
      background-color: #fff;
      color: #999;
      font-size: .81rem;
      line-height: 1;
      margin-bottom: 0.31rem;
      // & + .list-item {
      //   margin-top: .31rem;
      // }
      .name {
        margin-bottom: 1.13rem;
        color: #333;
        font-size: 1.06rem;
        > :last-child {
          color: #9b9fa9;
          font-size: .94rem;
          &.out {
            color: #eeab40;
          }
        }
      }
      .number {
        margin-bottom: .5rem;
        > :last-child {
          color: #ff4343;
          font-size: 1rem;
        }
      }
      .time {
        > :last-child {
          text-decoration: line-through;
          font-size: .94rem;
        }
      }
    }
    .no-order {
      padding-top: 8.13rem;
      color: #999;
      font-size: 1rem;
      white-space: nowrap;
      .no-order-img {
        width: 12.5rem;
      }
    }
  }
</style>

